<template>
  <div class="about-us">
    <e-head></e-head>
    <div class="content-box">
      <router-info :current="routerInfo"></router-info>
      <div class="content">
        <div class="flex-left-title">{{ $t("lang.aboutUs") }}</div>
        <div class="detail">
          <div class="ql-snow ql-editor" v-html="content"></div>
        </div>
      </div>
    </div>
    <e-foot></e-foot>
  </div>
</template>
<script>
import Ehead from "@/components/head.vue";
import Efoot from "@/components/foot.vue";
import RouterInfo from "@/components/router-info.vue";
import { getAboutUs } from "@/utils/api.js";
export default {
  components: {
    "e-head": Ehead,
    "e-foot": Efoot,
    RouterInfo,
  },
  data() {
    return {
      content: null,
      routerInfo: [
        {
          name: "lang.home",
          route: "",
        },
        {
          name: "lang.aboutUs",
          route: "",
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getAboutUs().then((res) => {
        this.content = res.data[0].content;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.about-us {
  .content-box {
    max-width: 1200px;
    margin: 0 auto;
    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      .detail {
        width: calc(100% - 250px - 50px);
      }
    }
  }
}
</style>